<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding:0;
				margin: 0;
			}
			#container{
				height: 400px;
				width: 600px;
				background: gray;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
				border: 1px solid #808080;
			}
			#container ul{
				width:3600px ;
				height: 400px;
			}
			#container ul li{
				width: 600px;
				height: 400px;
				float: left;
				list-style: none;
			}
			#container ul li img{
				height: 100%;
				width: 100%;
			}
			input{
				left: 0;
				height: 30px;
				width: 50px;
				position: absolute;
			}
			#right{
				left: 80px;
			}
			#container #btn{
				bottom: 25px;
				position: absolute;
				left: 50%;
				height: 30px;
				width: 300px;
				display: flex;
				justify-content:center;
				margin-left: -150px;
			}
			#container #left{
				left: 30px;
				top: 34px;
			}
			#container #right{
				left: 90px;
				top: 34px;
			}
			#container #btn p{
				height: 30px;
				width: 30px;
				border-radius: 50%;
				background: black;
				float: left;
				opacity:0.4;
				margin-right:25px ;
			}
			#container #btn span{
				display: inline-block;
				width: 10px;
				height: 30px;
			}
			#container #btn .active{
				height: 30px;
				width: 30px;
				border-radius: 50%;
				background: green;
			}
		</style>
		<script type="text/javascript" src="js/move.1.2.js" ></script>
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				var oUl=document.getElementById('list');
				var btn = document.getElementById('btn');
				var left = document.getElementById('left');
				var right = document.getElementById('right');
				var oLi = oUl.getElementsByTagName('li');
				var aP =btn.getElementsByTagName('p');
				//复制第一张图，并插到ul后面；
				var clone = oLi[0].cloneNode(true);
				//console.log(clone);
				oUl.appendChild(clone);
				
				oUl.style.width = oLi.length*oLi[0].offsetWidth + 'px';
				for(var i = 0; i<oLi.length-1; i++){
					var p= document.createElement('p');
					if(i==0){
						p.className = 'active';
					}
					btn.appendChild(p);
					var span = document.createElement('span');
					btn.appendChild(span);
				}
				var index=0;
				right.onclick=function(){
					if(index==oLi.length-1){
						index=1;
						oUl.style.marginLeft=0;
					}else{
						index++;
					}
					changepic();
				};
				left.onclick=function(){
					if(index==0){
						index=aP.length-1;
					}else{
						index--;
					}
					changepic();
				}
				for(let i=0;i<aP.length-1;i++){
					aP[i].onmouseover =function(){
					index = i;
					clearInterval(timer);
					changepic();
					}
					aP[i].onmouseout = function(){
						timer = setInterval(right.onclick,2000);
					}
				}
				
				
				
				function changepic(){
					move(oUl,{'marginLeft':-index*oLi[0].offsetWidth});
					for(var i= 0;i<aP.length;i++){
						aP[i].className="";
						
					}
					
					if(index == oLi.length-1){
						aP[0].className = "active";
					}
					//console.log(index);
					aP[index].className = "active";
				}
				var timer=setInterval(right.onclick,2000);
			}
			
		</script>
		<div id="container">
			<ul id="list">
				<li><img src="img/pic1.jpg"/></li>
				<li><img src="img/pic2.jpg"/></li>
				<li><img src="img/pic3.jpg"/></li>
				<li><img src="img/pic4.jpg"/></li>
				<li><img src="img/pic5.jpg"/></li>
				<li><img src="img/pic6.jpg"/></li>
			</ul>
			<div id="btn">
				<!--<p class="active"></p><span></span>
				<p></p><span></span>
				<p></p><span></span>
				<p></p><span></span>
				<p></p><span></span>
				<p></p><span></span>-->
			</div>
			<input type="button" value="向左" id="left"/>
			<input type="button" value="向右" id="right"/>
		</div>
	</body>
</html>
